<template>
	<view class="page custom-page">
		<custom-head gradient back title="宝箱管理"></custom-head>
		<u-tabs-swiper ref="uTabs" :list="list" :is-scroll="false" swiperWidth="750" @change="tabsChange"></u-tabs-swiper>
		<view class="gift">
			<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="i in list">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<view class="gift_box">
							<view class="gift_box_item flex a-center jlr" v-for="item in treasureBoxList" @click="getJumpId(item)">
								<view class="flex a-center">
									<view class="image"><image :src="item.img" mode="widthFix" /></view>
									<view class="info">
										<view class="title flex a-center">
											<view class="label">{{ item.name }}</view>
										</view>
										<p class="red">赠送积分: {{ item.points }}</p>
									</view>
								</view>
								<view class="date">
									累计: {{ item.total }} 个<u-icon name="arrow-right" color="#8F9399" size="32"></u-icon>
								</view>
								
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<u-button class="bottom_btn" type="primary" @click="enterAddBox">新增</u-button>
		<u-action-sheet cancelText="取消" :list="sheetlist" v-model="show" @click="enterPage"></u-action-sheet>

	</view>
</template>

<script>
import { getTreasure } from '../../api/modules/treasure';

	export default {
		data() {
			return {
				show:false,
				sheetlist:[{text:'发放'},{text:'编辑'},{text:'发放记录'}],
				list: [{
					name: '全部宝箱'
				}, {
					name: '成长宝箱'
				}, {
					name: '任务宝箱'
				}],
				current: 0,
				swiperCurrent: 0,

				treasureBoxList: [], // 列表数据
				transferTreasureBoxList: [], // 列表数据中转站
				page_no:1 ,  // 默认加载第一页
				page_size:20 ,  // 每页加载 20条数据
				total: 0, // 一共有多少条数据 
				clickId: '', // 点击获取的id
				static_uri: getApp().globalData.glb_list.config.static_uri, // 获取全局配置文件
			};
		},
		onShow() {
			this._getTreasure({page_no: 1, page_size: 10000})
		},
		onLoad(params) {
			// this.urlId = params.id
			// this._getTreasure()
			// console.log('页面初始化 params', params)
		},
		methods: {
			enterAddBox() {
				console.log('11')
				uni.navigateTo({
					url: '/pages/student/addBox'
				})
			},
			getJumpId(parmas) {
				console.log('获取 params', parmas)
				this.clickId = parmas.id
				this.show = true
			},
			enterPage(index){
				if (index === 0 ) {
					uni.navigateTo({
						url:`/pages/student/giftSend?id=${this.clickId}`
					})
				} else if (index === 1) {
					uni.navigateTo({
						url:`/pages/student/addBox?id=${this.clickId}`
					})
				} else if (index === 2) {
					uni.navigateTo({
						url:`/pages/home/sendBox?id=${this.clickId}`
					})
				}
			},
			tabsChange(index) { // tab 滑块 1：成长宝箱；2：任务宝箱
				this.swiperCurrent = index;
				if (index === 1) {
					this.treasureBoxList = this.transferTreasureBoxList.filter((item) => item.type == 1)
				} else if (index === 2) {
					this.treasureBoxList = this.transferTreasureBoxList.filter((item) => item.type == 2)
				} else {
					this.treasureBoxList = this.transferTreasureBoxList
				}
			},
			transition(e) {
				// console.log('滑块', e, this.$refs)
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			animationfinish(e) {
				// console.log('滑块---', e)
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			_getTreasure() {  // 宝箱管理的页面数据
				getTreasure().then((res) => {
					const { code, data } = res || {};
					let newList = [];
					if (code === 200) {
						this.treasureBoxList = data.list.map((i) => ({...i, img: this.static_uri+i.avatar})).filter(i => i.sid === this.glbId);
						this.transferTreasureBoxList = data.list.map((i) => ({...i, img: this.static_uri+i.avatar})).filter(i => i.sid === this.glbId);
						this.page_no = data.page_no;
						this.total = data.total;
					}
				})
			},
		}
	};
</script>

<style scoped>
	page{height: 100%;}
	.gift{height: calc(100% - 80rpx); overflow: hidden;}
	.gift swiper,.gift swiper-item{width: 100%; height: 100%;}
	.gift_box{ padding: 0px 20rpx;}
	.gift_box_item{background-color: #fff; margin-bottom: 20rpx; border-radius: 20rpx; box-shadow: 0rpx 2rpx 8rpx 0rpx #DDDFEB; padding: 30rpx 22rpx;}
	.gift_box_item .image{width: 150rpx; height: 150rpx; border-radius: 20rpx; overflow: hidden;}
	.gift_box_item .info{padding-left: 25rpx; font-size: 28rpx; color: #303133;}
	.gift_box_item .title{margin-bottom: 10rpx;}
	.gift_box_item .info .userImage{width: 60rpx; height: 60rpx; border-radius: 50%; overflow: hidden;}
	.gift_box_item .info .label{font-size: 32rpx;}
	.date{font-size: 28rpx; color: #303133;}
	.gift_box_item:active{filter: brightness(80%)}
	.red {
		color: #F84638;
	}
	.bottom_btn {
		margin: 20rpx;
		margin-right: 40rpx;
		margin-left: 40rpx;
		border-radius: 60rpx;
	}
</style>